<template>
  <div id="app" class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="学号" prop="student_no">
              <el-input v-model="formData.student_no" style="width: 250px" placeholder="请输入学号"></el-input>
            </el-form-item>

            <el-form-item label="角色" prop="role">
              <el-select v-model="formData.role" style="width: 250px" placeholder="请选择角色">
                <el-option
                  v-for="item in roles"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="环境" prop="environment">
              <el-radio-group v-model="formData.environment">
                <el-radio
                  v-for="env in environments"
                  :key="env.value"
                  :label="env.value"
                >
                  {{ env.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <div style="margin-top: 20px; display: flex; position: relative; left: 100px">
            <el-button @click="formSubmit">提交修改</el-button>
            <el-button @click="formReset">重置表单</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as api from './api'
export default {
  name: 'test_tools',
  data () {
    return {
      formData: {
        student_no: '',
        role: '',
        environment: 'test'
      },
      rules: {
        student_no: [
          { required: true, message: '学号不能为空', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        environment: [
          { required: true, message: '请选择环境', trigger: 'change' }
        ]
      },
      environments: [
        { value: 'test', label: '测试环境' },
        { value: 'pressure', label: '压测环境' }
      ],
      roles: [
        { value: 0, label: '正式会员' },
        { value: 1, label: '体验会员' },
        { value: 2, label: '购机会员' },
        { value: 3, label: '督学师' },
        { value: 4, label: '测试账号' },
        { value: 5, label: 'C端用户' },
        { value: 6, label: '学习规划师' }
      ]
    }
  },
  methods: {
    formSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.$message.error('学号或角色不能为空')
          this.submitting = false
          return
        }

        this.submitting = true
        const rawData = JSON.parse(JSON.stringify(this.formData))
        api.updateRole(rawData).then(res => {
          if (res.data.code === 200) {
            this.$message.success('修改成功')
            this.formReset()
          } else {
            this.$message.error(res.data.message || '操作失败')
          }
        }).finally(() => {
          this.submitting = false
        })
      })
    },
    formReset () {
      // 重置表单
      this.$refs.form.resetFields()
      this.formData = {
        student_no: '',
        role: '',
        environment: 'test'
      }
    }
  }
}
</script>
